<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;

        }
        #box1{
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
            left: 0;
        }
    </style>
    <script>
        window.onload=function(){
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            //定义一个变量，用来博爱村定时器的标识
            var timer;
            //点击按钮以后，使box1向右移动(left值增大)
            btn01.onclick=function(){
                //关闭上一个定时器

                clearInterval(timer); 
            
                // alert(oldValue);
                 timer=setInterval(function(){
                //获取box原来的Left值
                 var oldValue=parseInt(getStyle(box1,"left"));
                 //在旧值的基础上增加
                 var newValue=oldValue+11;
                 //判断newValue是否大于800
                 if(newValue>800){
                     newValue=800;
                 }
                 //将新值设置给box1
                 box1.style.left=newValue+"px";
                 //当元素移动到800px时，让其停止执行动画
                 if(newValue===800){
                    //达到目标，关闭定时器
                    clearInterval(timer);
                 }

                   
                },30)
            }
        };
        function getStyle(obj,name){
                  if(window.getComputedStyle){
                    //正常浏览器的方式
                    return getComputedStyle(obj,null)[name];
                  }
                  else{
                     //IE8的方式
                     return obj.currentStyle[name];
                  }
                  
                 
              }
    </script>
</head>
<body>
    <button id="btn01">点击按钮以后box01向右移动</button>
    <br><br>
    <div id="box1"></div>
    <div style="width: 0; height: 1000px;border: 1px black solid;position: absolute;left:800px;top: 0;;"></div>
    
</body>
</html>